<template>
	<view class="zy-column-full">
		<zy-title title="Recharge"></zy-title>
		
		<scroll-view class="zy-scroll" scroll-y>
			<view class="zy-column-center-v top-bg">
				<view class="zy-text-white zy-mt-50">Auccount balance:</view>
				<zy-price class="zy-mt-lg" price="45.32" size="lg"></zy-price>
			</view>
			<view class="zy-page-padding">
				<view class="zy-row-center zy-text-gray zy-mt-50">Recharge amount</view>
				<view class="zy-row-center zy-mt-lg">
					<zy-price price="45.32" size="lg" color="black"></zy-price>
				</view>
				<zy-line></zy-line>
				<view class="zy-text-gray zy-mt-lg">Select recharge amount</view>
				<view class="zy-row-wrap zy-mt-sm">
					<view class="zy-p-sm" style="width: 33%; box-sizing: border-box;">
						<view class="zy-column-center-v zy-bg-yellow-light-r15  zy-pv-sm">
							<view class="zy-text-black">₱</view>
							<view class="zy-text-black zy-mt-sm">400</view>
						</view>
					</view>
					<view class="zy-p-sm" style="width: 33%; box-sizing: border-box;">
						<view class="zy-column-center-v zy-bg-yellow-light-r15  zy-pv-sm">
							<view class="zy-text-black">₱</view>
							<view class="zy-text-black zy-mt-sm">400</view>
						</view>
					</view>
					<view class="zy-p-sm" style="width: 33%; box-sizing: border-box;">
						<view class="zy-column-center-v zy-bg-yellow-light-r15  zy-pv-sm">
							<view class="zy-text-black">₱</view>
							<view class="zy-text-black zy-mt-sm">400</view>
						</view>
					</view>
					<view class="zy-p-sm" style="width: 33%; box-sizing: border-box;">
						<view class="zy-column-center-v zy-bg-yellow-light-r15  zy-pv-sm">
							<view class="zy-text-black">₱</view>
							<view class="zy-text-black zy-mt-sm">400</view>
						</view>
					</view>
					<view class="zy-p-sm" style="width: 33%; box-sizing: border-box;">
						<view class="zy-column-center-v zy-bg-main-r15 zy-pv-sm">
							<view class="zy-text-white">₱</view>
							<view class="zy-text-white">400</view>
						</view>
					</view>
					<view class="zy-p-sm" style="width: 33%; box-sizing: border-box;">
						<view class="zy-column-center-v zy-bg-yellow-light-r15  zy-pv-sm">
							<view class="zy-text-black">₱</view>
							<view class="zy-text-black zy-mt-sm">400</view>
						</view>
					</view>
					
				</view>
				<zy-button class="zy-mt-100" content="Recharge"></zy-button>
				<view class="zy-row-center zy-text-main zy-mt" style="text-decoration: underline;">Click to view the recharge tutorial</view>
			</view>
			
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg{
		height: 220rpx; 
		background-color: $zy-color-main;
	}
</style>
